<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j" xmlns:p="http://primefaces.org/ui"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

		<rich:extendedDataTable id="tbl_lista_contactos" var="objc"
			value="#{contactosBean.listContacts}">
			<f:facet name="noData">No existen contactos para listar</f:facet>
			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="Nombre" />
				</f:facet>
				<h:outputText value="#{objc.nombre}" />
			</rich:column>

			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="E-Mail" />
				</f:facet>
				<h:outputText value="#{objc.mail}" />
			</rich:column>

			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="Celular" />
				</f:facet>
				<h:outputText value="#{objc.telefono}" />
			</rich:column>

			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="Opciones" />
				</f:facet>

				<a4j:commandButton execute="@this" render="popupEliminar"
					value="Eliminar" oncomplete="#{rich:component('popupEliminar')}.show()">
					<f:setPropertyActionListener target="#{contactosBean.contact}"
						value="#{objc}" />
				</a4j:commandButton>

				<a4j:commandButton execute="@this" render="popupEditar"
					value="Editar" oncomplete="#{rich:component('popupEditar')}.show()">
					<f:setPropertyActionListener target="#{contactosBean.contact}"
						value="#{objc}" />
				</a4j:commandButton>

			</rich:column>
		</rich:extendedDataTable>
		<!-- ///////////////////////////////////////////////////////////////////////////////////    -->


		<rich:popupPanel id="popupEliminar" modal="true" resizeable="true"
			domElementAttachment="parent">
			<f:facet name="header">
				<h:outputText value="Eliminar" />
			</f:facet>
			<f:facet name="controls">
				<h:outputLink value="#"
					onclick="#{rich:component('popupEliminar')}.hide(); return false;">
                X
            </h:outputLink>
			</f:facet>
			<p>Esta seguro que desea eliminar este contacto....</p>
			<a4j:commandButton value="Eliminar"
				action="#{contactosBean.eliminarcontacto}"
				render="tbl_lista_contactos" execute="@this"
				oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('popupEliminar')}.hide();}" />
				
			<a4j:commandButton value="No"	onclick="#{rich:component('popupEliminar')}.hide(); return false;" />

		</rich:popupPanel>






		<rich:popupPanel id="popupEditar" modal="true" resizeable="true"
			domElementAttachment="parent">
			<f:facet name="header">
				<h:outputText value="Eliminar" />
			</f:facet>
			<f:facet name="controls">
				<h:outputLink value="#"
					onclick="#{rich:component('popupEditar')}.hide(); return false;">
                X
            </h:outputLink>
			</f:facet>

			<fieldset> 
			<h:outputLabel value="Nombres del Contacto: " />
			<h:inputText value="#{contactosBean.contact.nombre}" id="nombre" />

			<h:outputLabel value="Mail de Contacto: " />
			<h:inputText value="#{contactosBean.contact.mail}" id="mail" />


			<h:outputLabel value="Número de Contacto: " />
			<h:inputText value="#{contactosBean.contact.telefono}" id="telefono" />
			</fieldset>
			<div>
			<a4j:commandButton value="Guardar"
				action="#{contactosBean.editarContacto}"
				render="tbl_lista_contactos" execute="popupEditar"
				oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('popupEditar')}.hide();}" />
			<a4j:commandButton value="Cancelar"
				onclick="#{rich:component('popupEditar')}.hide(); return false;" />
			</div>
		</rich:popupPanel>





</ui:composition>
